import { memo, useCallback } from 'react';
import { Table, TableSelectionModel } from '../../../../functionalComponent';
import { Layout, iup } from '../../../../util';
import { QueryPanel } from '../../../query-panel';
import { loadSourceData } from '../../service';
import NoticeIconContent from './NoticeIconContent';
/**
 * 树形表格
 * isTree: 是否树形表格
 */
const SourceTreeTable = (props: any) => {
  const { getRef, state, popupMode, flowCode, busData, rowDisable, iconVisible } = props;

  // 表格数据data
  const tableRequest = useCallback(
    (defaultParams) => {
      const sourceId = state.sourceId;
      const newsourceId = sourceId?.indexOf('_') ? iup.split(sourceId, '_')[1] : sourceId;
      return loadSourceData({ flowCode, busData, ...defaultParams, popupMode, sourceId: newsourceId });
    },
    [popupMode, state.sourceId]
  );

  // 搜索框
  const onSearch = (_, queryCondition) => {
    getRef('table')?.current?.getApi().setExtraParam({ queryCondition });
  };

  return (
    <Layout.Flex direction="column">
      {/* 查询条件 */}
      {state.queryItems.length > 0 && <QueryPanel items={state.queryItems} onSearch={onSearch} />}
      <NoticeIconContent iconVisible={iconVisible}>
        <Table
          ref={getRef('table')}
          isTree
          key={state.sourceId}
          autoLoad={true}
          tableAlertRender={false}
          rowSelection={{
            type: state.allowMultiSelect == 1 ? TableSelectionModel.CHECKBOX : TableSelectionModel.ROW,
            autoCheckedChildren: true,
            disabled: rowDisable
          }}
          keyField="id"
          columns={state.columns}
          request={tableRequest}
        />
      </NoticeIconContent>
    </Layout.Flex>
  );
};

export default memo(SourceTreeTable);
